<template>
  <div class="page-content">
    <div class="buttons">
      <el-button type="primary" size="mini" @click="randomToken(32)">随机Token</el-button>
      <el-button type="primary" size="mini" @click="open=true">自定义</el-button>
      <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refreshToken"></el-button>
    </div>

    <el-card>
      <div class="token-value">
        <span>
             当前Token:
        </span>
        {{ tokenData.search_token }}
        <el-button size="mini" icon="el-icon-document-copy" circle
                   @click="copyToClipboard(tokenData.search_token)"></el-button>
      </div>
      <div class="token-value">
        <span>
           过期时间:
        </span>
        {{ tokenData.expire==="-1秒"?"永久有效":tokenData.expire }}
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="Token" >
          <el-input v-model="form.token" placeholder="请输入Token" />
        </el-form-item>
        <el-form-item label="过期时间">
          <el-select v-model="form.day"  placeholder="过期时间">
            <el-option label="7天" value="7" ></el-option>
            <el-option label="15天" value="15"></el-option>
            <el-option label="30天" value="30"></el-option>
            <el-option label="永久" value="0"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getSearchToken, setSearchToken} from "@/api/admin/searchToken";
import {Message} from "element-ui";

export default {
  name: "Record",
  data() {
    return {
      // 遮罩层
      loading: true,

      tokenData: {
        search_token: "testTokne",
        expire: "71小时59分46秒"
      },

      // 弹出层标题
      title: "自定义Token",
      // 是否显示弹出层
      open: false,

      // 表单参数
      form: {

      },
      // 表单校验
      rules: {
        token: [
          {required: true, message: "Token不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getTokenValue();
  },
  methods: {
    getTokenValue() {
      getSearchToken().then(response => {
        if (response.code === 200) {
          this.tokenData = response.data;
        }
      })
    },
    refreshToken() {
      this.getTokenValue()
    },
    randomToken(length = 32) {
      //   随机生成一个Token
      const crypto = require('crypto');
      const token = crypto.randomBytes(Math.ceil(length / 2))
        .toString('hex')
        .slice(0, length);


      setSearchToken(
        {
          token: token,
          day: 7
        }
      )
        .then(response => {
          if (response.code === 200) {
            this.getTokenValue()
           Message.success("刷新成功")

          }
        });
    },
    async copyToClipboard(text) {
      try {

        await navigator.clipboard.writeText(text);
       Message.success("复制成功")
      } catch (err) {
        console.error('无法复制文本到剪贴板:', err);
      }
    },
    submitForm(){
      setSearchToken(this.form).then(res=>{
        if(res.code === 200){
          this.getTokenValue()
          Message.success("设置成功")

          this.open=false
        }
      })
    }
  }
};
</script>
<style scoped lang="scss">
.buttons {
  margin: 20px 16px;
  display: flex;
  gap: 4px;

}

.token-value {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;

}

span {
  font-size: 20px;
  margin-right: 8px;
}
</style>
